<!-- 抽卡 -->
<template>
    <view class="page" :style="{backgroundImage: 'url(' + $imgUrls(configInfo.backImg) + ')', backgroundColor: configInfo.bjColor, 
        paddingTop: totalHeight + 'px'}" v-if="configInfo">
        <view class="fcBtn d-flex a-center" :style="{top: menuButtonTop + 'px'}">
            <view class="flex-1 flexac">
                <text class="iconfont icon-shouyeT211" @click="backHome()" v-if="fromShare == 1"></text>
                <text class="iconfont icon-xiangzuo" @click="back()" v-else></text>
            </view>
            <u-line direction="column" color="#666" length="16"></u-line>
            <view class="flex-1 flexac p-re" @click="toUrl('/otherPage/lottery/prizeList?cid=' + cid)">
                <text class="iconfont icon-a-2503 size40"></text>
                <u-badge bgColor="#ff0000" max="99" :value="configInfo.my_prize_num" absolute :offset="[-8,-4]"></u-badge>
            </view>
        </view>
        <view class="topImg">
            <image :src="$imgUrls(configInfo.img)" mode="widthFix" v-if="configInfo.img"></image>
        </view>
        <view class="main bor_radius_40 d-flex j-centert f-wrap p-re">
            <view class="card p-re" :class="start == 1 ? 'item' + index : ''" @click="handleFlip(index)" v-for="(item,index) in 9" :key="index">
                <image :src="$imgUrls(configInfo.drawCardImg.back)" mode="aspectFill" class="back p-ab" :class="{'reverse': current == index}"></image>
                <image :src="$imgUrls(configInfo.drawCardImg.front)" mode="aspectFill" class="front p-ab" :class="{'reverse': current == index}"></image>
            </view>
            <view class="overlay wh flexac p-ab white" v-if="start == 0">
                <view class="btn flexac f-column" v-if="configInfo.startTiming > 0">
                    <view class="size32 bold">活动未开始</view>
                    <view>活动将于<text class="m-left10 m-right10">{{ configInfo.startDate }}</text>开始</view>
                </view>
                <view class="btn flexac size32 bold" v-else-if="configInfo.endTiming < 0">活动已结束</view>
                <view class="btn flexac f-column" @click="handleRaffle(1000)" v-else>
                    <view class="size32 bold" v-if="num > 0 || num == 'nolimit'">立即抽奖</view>
                    <block v-if="num != 'nolimit'">
                        <view v-if="num > 0">您还有<text class="bold m-left10 m-right10">{{ num }}</text>次抽奖机会</view>
                        <view class="size26" v-else>今日抽奖机会已用完</view>
                    </block>
                </view>
            </view>
        </view>
        <view class="rule bor_radius_40 m-top30">
            <view class="name size28 bold p-left16 m-bot20">活动规则</view>
            <u-parse :content="configInfo.details" :domain="imgUrl"></u-parse>
        </view>

        <!-- 弹窗 -->
        <view class="mask flexac f-column" v-if="showResult">
            <view class="popup padding40 text-center" :style="{backgroundImage: 'url(' + $imgUrls(configInfo.drawCardImg.bigImg) + ')'}">
                <block v-if="prizeData.type == 0">
                    <view class="size60 m-top160 m-bot20">好遗憾</view>
                    <view class="size40 color_990 p-bot40">没有获得任何奖品</view>
                </block>
                <block v-else>
                    <view class="size40 color_990 m-bot60">恭喜抽中了</view>
                    <image :src="$imgUrls(prizeData.img)" mode="aspectFill" class="img m-bot10"></image>
                    <view class="size32 m-bot10">{{ prizeData.title }}</view>
                    <view class="ellipsis_3 text-left p-left60 p-right60">
                        <text class="color_66">{{ prizeData.info }}</text>
                        <text class="color_009" @click="showPop = true" v-if="prizeData.details">[详情]</text>
                    </view>
                </block>
                <view class="d-flex j-se white m-top60 m-bot20">
                    <view class="btn flexac size28" @click="toUrl('/otherPage/lottery/prizeList?cid=' + cid)" v-if="prizeData.prizeId">查看奖品</view>
                    <view class="btn flexac size28" @click="handleRaffle(2000)" v-if="num > 0 || num == 'nolimit'">再来一把</view>
                    <view class="btn flexac size28" @click="close" v-else>关闭</view>
                </view>
                <block v-if="num != 'nolimit'">
                    <view class="size28 color_66" v-if="num > 0">
                        您还有<text class="size28 color_990 bold m-left10 m-right10">{{ num }}</text>次抽奖机会
                    </view>
                    <view class="size28 color_66" v-else>今日抽奖机会已用完</view>
                </block>
            </view>
            <text class="iconfont icon-guanbi size60" @click="close"></text>
        </view>

        <u-popup :show="showPop" :round="10" mode="bottom" closeable @close="showPop = false">
            <view class="padding30">
                <view class="size36 text-center m-bot30">{{ prizeData.title }}</view>
                <view class="botPop">
                    <u-parse :content="prizeData.details" :domain="imgUrl"></u-parse>
                </view>
            </view>
        </u-popup>

        <showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>

        <!-- 倒计时 -->
        <view class="mask flexac size60 white bold" v-if="showSecs">{{ seconds }}</view>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
                imgUrl: this.imgUrl,
                menuButtonTop: getApp().globalData.menuButtonObject.top,
                fromShare: 0,
                cid: '',
                configInfo: '',
                prizeData: '',
                num: '', // 今日剩余抽奖次数
                current: -1,
                start: 0, // 初始0、开启动画1、关闭动画无蒙层2
                showResult: false,
                showPop: false,
                showModal: false,

                seconds: 0,
                timer: null,
                showSecs: false
            }
        },
        computed: {
            ...mapState(['totalHeight', 'bid', 'vid', 'share'])
        },
        onLoad(e) {
            if(e.fromShare) this.fromShare = e.fromShare
            if(e.cid) this.cid = e.cid
            this.getConfigInfo()
        },
        onUnload() {
            if(this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        methods: {
            countDown() {
                if(this.seconds < 4 || this.seconds > 1800) return
                if(this.timer) {
                    clearInterval(this.timer)
                    this.timer = null
                }
                this.timer = setInterval(() => {
                    this.seconds --
                    if(this.seconds <= 30) {
                        this.showSecs = true
                    }
                    if(this.seconds == 0) {
                        clearInterval(this.timer)
                        this.showSecs = false
                    }
                }, 1000)
            },
            getConfigInfo() { // 获取配置信息
                this.$http.post({
                    url: '/SRA_LuckDraw/config',
                    data: {
                        VeriCode: this.bid,
                        cid: this.cid
                    }
                }).then(res => {
                    if(res.code != 100) return this.$Toast(res.notice)
                    this.configInfo = res.data
                    this.num = res.data.useDate.useDayResidueNum
                    // 开始剩余时间秒
                    // this.seconds = res.data.startTiming
                    // this.countDown()
                })
            },
            getPrize() { // 抽奖
                this.$http.post({
                    url: '/SRA_LuckDraw/getPrize',
                    data: {
                        VeriCode: this.bid,
                        cid: this.cid
                    }
                }).then(res => {
                    if(res.code != 100) return this.$Toast(res.notice)
                    this.prizeData = res.data.prizeDate
                    this.num = res.data.useDate.useDayResidueNum
                    this.showResult = true
                })
            },
            handleRaffle(delay) {
                if(!this.vid) return this.showModal = true
                if(this.num > 0 || this.num == 'nolimit') {
                    if(this.showResult) { // 再来一把
                        this.showResult = false
                        this.current = 10
                        setTimeout(() => {
                            this.start = 1
                            this.current = -1
                        }, 1000)
                       
                    } else { // 立即抽奖
                        this.start = 1
                    }
                    setTimeout(() => {
                        this.start = 2
                    }, delay)
                }
            },
            handleFlip(index) {
                if(this.start == 1 || this.current > -1) return
                this.current = index
                setTimeout(() => {
                    this.getPrize()
                }, 1000)
            },
            close() {
                this.showResult = false
                this.current = -1
                this.start = 0
            }
        },
        onShareAppMessage() {
            this.$addShareNum('games', this.cid, '1')
            return {
                title: this.configInfo.title,
                path: `/pages/index/index?share_v_id=${this.vid}&pageType=17&gid=drawCard&cid=${this.cid}`
            }
        },
        onShareTimeline() {
            this.$addShareNum('games', this.cid, '2')
            return {
                title: this.configInfo.title,
                query: `share_v_id=${this.vid}&cid=${this.cid}&fromShare=1`,
                imageUrl: this.$imgUrls(this.configInfo.img || this.share.imageUrl)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        background-repeat: no-repeat;
        background-size: 100% auto;
        padding: 0 30rpx;
        padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    }
    .fcBtn {
        width: 160rpx;
        height: 64rpx;
        background: rgba(255, 255, 255, .8);
        border-radius: 64rpx;
        border: 1rpx solid #dadbde;
        position: fixed;
        left: 20rpx;
        z-index: 20;
        .icon-a-2503 {
            color: #FF3300;
        }
    }
    .topImg {
        min-height: 100rpx;
    }
    .main {
        background: rgba(255, 255, 255, .5);
        padding: 15rpx 0;
        .card {
            width: 200rpx;
            height: 256rpx;
            margin: 10rpx;
            perspective: 1000rpx;
            image {
                border-radius: 30rpx;
                backface-visibility: hidden; // 隐藏旋转元素的背面
                transition: transform 1s ease;
            }
            .back { // 背面
                transform: rotateY(0deg);
                &.reverse {
                    transform: rotateY(180deg);
                }
            }
            .front { // 正面
                transform: rotateY(180deg);
                &.reverse {
                    transform: rotateY(0deg);
                }
            }
        }
        .overlay {
            background: rgba(0, 0, 0, .5);
            top: 0;
            left: 0;
            z-index: 10;
            .btn {
                min-width: 378rpx;
                height: 92rpx;
                background: #FF3300;
                border-radius: 92rpx;
                border: 4rpx solid #fff;
            }
        }
    }
    .rule {
        background: rgba(255, 255, 255, .5);
        padding: 25rpx;
        .name {
            position: relative;
            color: #FF3300;
            &::before {
                content: '';
                width: 6rpx;
                height: 24rpx;
                background: #FF3300;
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -12rpx;
            }
        }
    }
    .popup {
        width: 650rpx;
        background-color: #fff;
        background-size: cover;
        background-position: center;
        border-radius: 90rpx;
        .color_990 {
            color: #990033;
        }
        .color_009 {
            color: #0099FF;
        }
        .img {
            width: 246rpx;
            height: 246rpx;
        }
        .btn {
            width: 246rpx;
            height: 78rpx;
            background: #FF3300;
            border-radius: 78rpx;
        }
    }
    .botPop {
        min-height: 300rpx;
        max-height: 70vh;
        overflow-y: auto;
    }
    // 相对自身位置偏移
    @for $i from 0 through 8 {
        .item#{$i} {
            animation: move#{$i} 1s linear;
        }
    }
    // 中心点偏移量
    $d: 60rpx;
    @keyframes move0 {
        0%, 100% { top: 0; left: 0; }
        20%, 40% { top: 276rpx + $d; left: 220rpx + $d; }
    }
    @keyframes move1 {
        0%, 100% { top: 0; left: 0; }
        20%, 45% { top: 276rpx + $d; left: $d; }
    }
    @keyframes move2 {
        0%, 100% { top: 0; left: 0; }
        20%, 50% { top: 276rpx + $d; left: -220rpx + $d; }
    }
    @keyframes move3 {
        0%, 100% { top: 0; left: 0; }
        20%, 55% { top: $d; left: 220rpx + $d; }
    }
    @keyframes move4 {
        0%, 100% { top: 0; left: 0; }
        20%, 60% { top: $d; left: $d; }
    }
    @keyframes move5 {
        0%, 100% { top: 0; left: 0; }
        20%, 65% { top: $d; left: -220rpx + $d; }
    }
    @keyframes move6 {
        0%, 100% { top: 0; left: 0; }
        20%, 70% { top: -276rpx + $d; left: 220rpx + $d; }
    }
    @keyframes move7 {
        0%, 100% { top: 0; left: 0; }
        20%, 75% { top: -276rpx + $d; left: $d; }
    }
    @keyframes move8 {
        0%, 100% { top: 0; left: 0; }
        20%, 80% { top: -276rpx + $d; left: -220rpx + $d; }
    }
</style>